<template>
  <div id="app">
    <!-- 动态组件切换页面-->
<transition name="fade" mode="out-in">
    <keep-alive>
      <component :is="coms[currentIndex]"/>
    </keep-alive>
</transition>
    

    <!-- 底部按钮 -->
    <div class="tabbar">
      <span :class="{active:currentIndex==index}" @click="currentIndex=index" v-for="(item,index) in btnArr" :key="index">{{item}}</span>
    </div>
  </div>
</template>

<script>
// 导入组件
import Home from './components/Home.vue'
import Tuan from './components/Tuan.vue'
import Order from './components/Order.vue'
import Min from './components/Min.vue'
// 导入 封装好的函数
// import {shop_list,tuan_list} from './utils/api'
export default {
  data(){
    return{
      currentIndex:0,
      btnArr:['首页','爆爆团','订单','我的'],
      // 把组件存在数组里，用动态组件实现页面切换
      coms:['Home','Tuan','Order','Min']
    }
  },
  mounted(){
    //在组件中 只需要调用分装好的函数，就可以发起axios请求
    // // 请求 爆爆团 正在抢购列表
    // tuan_list({status:1}).then((res)=>{
    //   console.log(res.data);
    // })
  },
  // 导入模块
  components:{
    Home,
    Tuan,
    Order,
    Min
  }
}
</script>

<style lang="scss" >
  *{
    margin: 0;
    padding: 0;
  }
  .tabbar{
    display: flex;
    justify-content: space-around;
    align-content: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    background: white;
  }
  .tabbar .active{
    color: lightblue;
  }

  // 入场动画
  .fade-enter{ //动画开始时的状态
    transform: rotate(0deg);
  }
  .fade-enter-active{
    transition: all 0.2s;
  }
  .fade-enter-to{ //动画结束时的状态
    transform: translate(360deg);
  }
  

  // 离场动画
  .fade-leave{ //动画开始时的状态
    transform: translate(360deg);
  }
  .fade-leave-active{
    transition: all 0.2s;
  }
  .fade-leave-to{ //动画结束时的状态
    transform:  rotate(0deg);
  }
</style>

